<template>
	<view class="online-image-card"
		:style="{'padding-left': supportSelect ? '56rpx' : undefined}"
		:class="{block: isBlock}">
		<view class="card-box">
			<online-custom-image class="image" style="margin-right: 20rpx;"
				:style="{'alignSelf': widget.props.imageAlign}"
				v-if="widget.props.imagePosition === 'left' && imageWidget"
				:value="getWidgetValue(imageWidget)"
				:src="imageWidget.props.src"
				:fit="imageWidget.props.fit"
				:width="imageWidget.props.width"
				:height="imageWidget.props.height"
				:round="imageWidget.props.round"
				:radius="imageWidget.props.radius"
				:widget="imageWidget"
				:rowData="rowData"
			/>
			<online-custom-block class="card-content"
				:widgetList="childWidgetList" 
				:operation="{
					getWidgetValue: getWidgetValue,
					onWidgetValueChange: onWidgetValueChange,
					onValueChange: onValueChange
				}"
			/>
			<online-custom-image class="image" style="marginLeft: 20rpx;"
				:style="{'alignSelf': widget.props.imageAlign}"
				v-if="widget.props.imagePosition === 'right' && imageWidget"
				:value="getWidgetValue(imageWidget)"
				:src="imageWidget.props.src"
				:fit="imageWidget.props.fit"
				:width="imageWidget.props.width"
				:height="imageWidget.props.height"
				:round="imageWidget.props.round"
				:radius="imageWidget.props.radius"
				:widget="imageWidget"
				:rowData="rowData"
			/>
		</view>
		<view v-if="$slots.menu" class="menu-box">
			<slot name="menu" />
		</view>
		<u-checkbox class="select" v-if="supportSelect" :value="isSelect" @change="onSelectChange"></u-checkbox>
	</view>
</template>

<script>
	export default {
		name: 'onlineImageCard',
		props: {
			rowData: {
				type: Object
			},
			masterTable: {
				type: Object
			},
			widget: {
				type: Object
			},
			parentWidget: {
				type: Object
			},
			supportSelect: {
				type: Boolean,
				default: false
			},
			isSelect: {
				type: Boolean,
				default: false
			},
			isBlock: {
				type: Boolean,
				default: false
			}
		},
		inject: ['form'],
		data() {
			return {
				checked: false,
			}
		},
		methods: {
			onSelectChange(detail) {
				this.$emit('select', this.rowData, detail.value);
			},
			getValue(data, widget) {
				if (widget.column == null) return '';
				if (this.form().readOnly 
				|| widget.widgetType === this.SysCustomWidgetType.Label 
				|| widget.widgetType ===this.SysCustomWidgetType.Text) {
					let dictObj = undefined
					if (widget && widget.column && widget.column.columnName && data) {
						dictObj = data[widget.column.columnName + 'DictMap'];
					}
					if (dictObj != null && dictObj.name) return dictObj.name;
					let dictArray = undefined
					if (widget && widget.column && widget.column.columnName && data) {
						dictArray = data[widget.column.columnName + 'DictMapList'];
					}
					if (Array.isArray(dictArray) && dictArray.length > 0) return dictArray.map(item => item.name).join(',');
				}
				return data[widget.column.columnName];
			},
			getWidgetValue(widget) {
				if (this.rowData == null || widget.bindData.dataType !== this.SysCustomWidgetBindDataType.Column) {
					return this.form().getWidgetValue(widget);
				} else {
					if (this.parentWidget == null) {
						// 来自于主表
						if (widget.relation) {
							return this.getValue(this.rowData[widget.relation.variableName], widget);
						} else {
							return this.getValue(this.rowData, widget);
						}
					} else {
						// 来自于从表
						return this.getValue(this.rowData, widget);
					}
				}
			},
			onValueChange(widget, val) {
				if (this.rowData) {
					this.rowData[widget.column.columnName] = val;
				} else {
					this.form().onValueChange(widget, val);
				}
			},
			onWidgetValueChange(widget, val, detail) {
				let dictData = (detail || {}).dictData;
				if (widget.relation && dictData && this.rowData) {
					if (widget.bindData.dataType === this.SysCustomWidgetBindDataType.Column && widget.column) {
						if (Array.isArray(dictData)) {
							this.rowData[widget.column.columnName + 'DictMapList'] = dictData;
						} else {
							this.rowData[widget.column.columnName + 'DictMap'] = dictData;
						}
					}
				}
			}
		},
		computed: {
			imageWidget() {
				if (Array.isArray(this.widget.childWidgetList) && this.widget.childWidgetList.length > 0) {
					return this.widget.childWidgetList[0];
				} else {
					return [];
				}

			},
			childWidgetList() {
				if (Array.isArray(this.widget.childWidgetList) && this.widget.childWidgetList.length > 0) {
					return this.widget.childWidgetList.slice(1);
				} else {
					return [];
				}
			}
		},
		mounted() {
			//this.childWidgetList = this.widget.childWidgetList.slice(1);
		}
	}
</script>

<style scoped>
	.block {
		background: #F6F7F9 !important;
		border-radius: 16rpx !important;
		margin-bottom: 30rpx;
	}

	.online-image-card {
		position: relative;
		padding: 20rpx 20rpx;
		border-radius: 10rpx;
		background: white;
		margin: 30rpx 0;
	}

	.card-box {
		display: flex;
		justify-content: flex-start;
	}

	.card-content {
		flex-grow: 1;
		flex-shrink: 1;
		width: 200rpx;
	}

	.select {
		position: absolute;
		left: 16rpx;
		top: 34rpx;
	}
</style>
